<template>
  <div class="bg">

    <el-row :gutter="10">

      <el-col v-if="opinion!=null" :span="18">

        <div style="background-color: white;padding: 10px;min-height: 1340px">
          <div style="text-align: center;color: #333;font-size: 24px;padding: 20px" v-html="opinion.title"> </div>


          <el-row border="1" style="width: 100%;border-radius: 5px;border: white;color: #565A5E">
            <el-row>
              <el-col :span="8" style="padding: 5px"><span  >来源：{{opinion.siteName}}</span></el-col>
              <el-col :span="16" style="padding: 5px"><span  >发布时间：{{opinion.publishTime}}</span></el-col>
            </el-row>
            <el-row>
              <el-col :span="8" style="padding: 5px"><span  >作者：{{opinion.author}}</span></el-col>
              <el-col :span="16" v-if="opinion.ispositive==1" style="padding: 5px"><span  >属性：正面 </span></el-col>
              <el-col :span="16" v-if="opinion.isneutral==1" style="padding: 5px"><span  >属性：中性 </span></el-col>
              <el-col :span="16" v-if="opinion.isnegative==1" style="padding: 5px"><span  >属性：负面 </span></el-col>
            </el-row>
            <el-row>
              <el-col :span="8" style="padding: 5px"><span  >关键词：{{opinion.keywords}}</span></el-col>
              <el-col :span="16" style="padding: 5px"><div  style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-right: 10px;">原文链接：{{opinion.url}}</div></el-col>
            </el-row>
          </el-row>

          <a :data-clipboard-text="copyOpinion" class="icon-copy"></a>

          <div style="text-align: right">
            <el-button type="text" @click="addToFavorites">收藏</el-button>
            <el-divider direction="vertical"></el-divider>
            <!--          <el-button type="text">分享</el-button>-->
            <!--          <el-divider direction="vertical"></el-divider>-->
            <el-dropdown trigger="click"  >
              <el-button   type="text"  >研判
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native="setSensitiveInformationBySigle(opinion, '正面')">
                  正面
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native="setSensitiveInformationBySigle(opinion, '中性')">
                  中性
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native="setSensitiveInformationBySigle(opinion, '负面')">
                  负面
                </el-dropdown-item>
<!--                <el-dropdown-item-->
<!--                  @click.native="setSensitiveInformationBySigle(opinion, '删除')">-->
<!--                  与我无关（删除）-->
<!--                </el-dropdown-item>-->
              </el-dropdown-menu>
            </el-dropdown>
            <el-divider direction="vertical"></el-divider>
            <el-dropdown trigger="click" >
              <el-button type="text">预警</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native="setForecastSigle(opinion, 'red')">
                  红色预警
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native="setForecastSigle(opinion, 'orange')">
                  橙色预警
                </el-dropdown-item>
                <el-dropdown-item
                  @click.native="setForecastSigle(opinion, 'yellow')">
                  黄色预警
                </el-dropdown-item>
              </el-dropdown-menu>

            </el-dropdown>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" @click="oneKeyCopy">一键复制</el-button>
                      <el-divider direction="vertical"></el-divider>
                      <el-link :href="opinion.url" type="primary" target="_blank">
                        查看原文
                      </el-link>

          </div>


          <div style="margin-top: 10px" v-html="opinion.content"> </div>
        </div>


      </el-col>

      <el-col v-if="opinion!=null" :span="6" style="margin-bottom: 10px">

        <word-cloud :hots="hotWords" :height="'320px'" :optionTitleText="'热词云图'"/>

      </el-col>

      <el-col v-if="opinion!=null" :span="6" style="margin-bottom: 10px">

        <graph-dep :height="'320px'"
                   :optionTitleText="'影响范围'"
                   :categories="categories"
                   :nodes="nodes"
                   :edges="links"
                   :repulsion="400"
        />

      </el-col>

      <el-col v-if="opinion!=null" :span="6" style="margin-bottom: 20px">
        <div style="background-color: white;padding: 10px;height: 320px">
          <div>
            <span class="titleStyle">相似文章</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="gotoSimilarArticles">更多</el-button>
          </div>

          <div class="body">
            <div v-if="opinionsOfSimilarArticles.length===0"
                 style="text-align: center;position: relative;height: 320px">
              <el-empty description="暂无记录"></el-empty>
            </div>
            <div v-for="item in opinionsOfSimilarArticles">
              <div>
                <div
                  class="article-title"
                  @click="GotoDetail(item.id)"
                  v-html="item.title"
                >
                </div>
              </div>

              <div style="font-size: 12px;color: #888888;margin-bottom: 10px">
                {{item.siteName}} {{item.publishTime}}
              </div>
            </div>
          </div>
        </div>

      </el-col>

      <el-col v-if="opinion!=null" :span="6" style="margin-bottom: 20px">
        <div style="background-color: white;padding: 10px;height: 320px">
          <div>
            <span class="titleStyle">作者历史发布</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="gotoSameAuthArticles">更多</el-button>
          </div>

          <div class="body">
            <div v-if="opinionsOfSameAuth.length===0"
                 style="text-align: center;position: relative;height: 320px">
              <el-empty description="暂无记录"></el-empty>
            </div>
            <div v-for="item in opinionsOfSameAuth">
              <div>
                <div
                  class="article-title"
                  @click="GotoDetail(item.id)"
                  v-html="item.title"
                >
                </div>
              </div>

              <div style="font-size: 12px;color: #888888;margin-bottom: 10px">
                {{item.siteName}} {{item.publishTime}}
              </div>
            </div>
          </div>
        </div>

      </el-col>


    </el-row>



  </div>


</template>
<script>
  import {
    getOpinion,
    getHotWords,
    addToFavorites,
    getOpinionsOfSameAuthorById,
    unbindOpinionForEvent,
    getOpinionsOfSimilarArticlesById,
    getRelationPersonNames,
    getRelationLocationNames,
    getRelationOrganizationNames,
  } from "@/api/system/opinion";
  import {joinTheForecast, updateSensitiveInformation} from "@/api/system/event";
  import WordCloud from '@/components/Echarts/WordCloud'
  import GraphDep from '@/components/Echarts/GraphDep'
  import handleClipboard from '@/utils/clipboard'
  export default {
    components: {
      WordCloud,
      GraphDep
    },

    data() {
      return {
        id:0,
        opinion:null,
        hotWords:[],
        opinionsOfSameAuth:[],
        opinionsOfSimilarArticles:[],
        queryParams: {
          pageNum: 1,
          pageSize: 6,
        },
        categories:[],
        nodes:[],
        links:[],
        copyOpinion:'',
        relationPersonNames:[],
        relationLocationNames:[],
        relationOrganizationNames:[]
      };
    },
    created() {
      this.id = this.$route.query.id
      this.getOpinionById()
      this.getHotWords();
      this.getOpinionsOfSameAuthorById();
      this.getOpinionsOfSimilarArticlesById();
      this.someMethod()
    },



    methods: {
      async  someMethod() {
        try {
          await Promise.all([this.getRelationPersonNames(), this.getRelationLocationNames(), this.getRelationOrganizationNames()]);
          this.buildGraph();
        } catch (error) {
          // 处理错误
          console.error('An error occurred: ', error);
        }
      },
      oneKeyCopy(){
        handleClipboard(this.copyOpinion, event)
      },
      setForecastSigle(row, level) {
        const query = {
          ids: row.id,
          level: level
        }
        joinTheForecast(query).then(response => {
          this.$message({
            showClose: true,
            message: '预警成功',
            type: 'success'
          })
        }).catch(error => {
          this.$message({
            showClose: true,
            message: '预警失败',
            type: 'warning'
          })
        })
      },
      setSensitiveInformationBySigle(row, sensitiveInformation) {
        console.log(row.id)

        if (sensitiveInformation == "删除") {
          const query = {
            ids: row.id,
            type: "exclude",
            eventId: this.eventId
          }
          this.unbind(query)
        } else {
          let query = {
            ids: row.id,
            sensitive: sensitiveInformation
          }
          this.yanpan(query)
        }

      },
      yanpan: function (query) {
        updateSensitiveInformation(query).then(response => {
          this.$message({
            showClose: true,
            message: '研判成功',
            type: 'success'
          })
        }).catch(error => {
          this.$message({
            showClose: true,
            message: '研判失败',
            type: 'warning'
          })
        })
      },
      unbind: function (query) {
        unbindOpinionForEvent(query).then(response => {
          this.$message({
            showClose: true,
            message: '解除关联成功',
            type: 'success'
          })
        }).catch(error => {
          this.$message({
            showClose: true,
            message: '已解除关联',
            type: 'warning'
          })
        })
      },
      addToFavorites(){
        const params = {
          ids: this.id,
        };
        addToFavorites(params).then(response => {
          this.$message({
            showClose: true,
            message: '加入收藏成功',
            type: 'success'
          })
        })
      },
      gotoSimilarArticles(){

      },
      gotoSameAuthArticles(){

      },
      GotoDetail(id){
        this.$router.push({path: '/opinion/detail',query:{id:id}});
      },
      buildGraph(){
        this.categories=[{
          "name": "人物",
          "keyword": {},
          "base": "人物"
        },{
          "name": "地域",
          "keyword": {},
          "base": "地域"
        },{
          "name": "机构",
          "keyword": {},
          "base": "机构"
        },{
          "name": "舆情",
          "keyword": {},
          "base": "舆情"
        }]
        let node={
          "name": "舆情",
          "category": 3,
          "id":"opinion"
        }
        this.nodes.push(node)

        this.relationPersonNames.forEach((item,index) =>{
          let node={
            "name": item,
            "category": 0,
            "id":"person"+index
          }
          this.nodes.push(node)
          let link={
            source:node.id,
            target:"person"
          }
          this.links.push(link)
        })
        node={
          "name": "人物",
          "category": 0,
          "id":"person"
        }
        this.nodes.push(node)
        let link={
          source:node.id,
          target:"opinion"
        }
        this.links.push(link)

        this.relationLocationNames.forEach((item,index) =>{
          let node={
            "name": item,
            "category": 1,
            "id":"location"+index
          }
          this.nodes.push(node)
          let link={
            source:node.id,
            target:"location"
          }
          this.links.push(link)
        })
        node={
          "name": "区域",
          "category": 1,
          "id":"location"
        }
        this.nodes.push(node)
        link={
          source:node.id,
          target:"opinion"
        }
        this.links.push(link)

        this.relationOrganizationNames.forEach((item,index) =>{
          let node={
            "name": item,
            "category": 2,
            "id":"organization"+index
          }
          this.nodes.push(node)
          let link={
            source:node.id,
            target:"organization"
          }
          this.links.push(link)
        })
        node={
          "name": "机构",
          "category": 2,
          "id":"organization"
        }
        this.nodes.push(node)
        link={
          source:node.id,
          target:"opinion"
        }
        this.links.push(link)
      },
      getOpinionById(){
        getOpinion(this.id).then(response => {
          this.opinion = response.data;
          this.copyOpinion='标题：'+this.opinion.headline+'\n' +
            '情感：'+this.opinion.sensitiveInformation+'\n' +
            '时间：'+this.opinion.publishDate+'\n' +
            '作者：'+this.opinion.selfMediaAccount+'\n' +
            '来源：'+this.opinion.mediaName+'\n' +
            '原文链接：'+this.opinion.url+'\n' +
            '内容：'+this.opinion.title
        });
      },
      getHotWords(){
        getHotWords(this.id).then(response => {
          let array= response.data
          array.forEach(item=>{
            let obj={
              name:item.keyword,
              value:item.weight
            }
            this.hotWords.push(obj)
          })
        });
      },
      getRelationPersonNames(){
        return new Promise((resolve, reject) => {
          getRelationPersonNames(this.id).then(response => {
            this.relationPersonNames = response.data;
            resolve();
          }).catch(error => {
            reject(error);
          });
        });
      },
      getRelationLocationNames(){
        return new Promise((resolve, reject) => {
          getRelationLocationNames(this.id).then(response => {
            this.relationLocationNames = response.data;
            resolve();
          }).catch(error => {
            reject(error);
          });
        })
      },
      getRelationOrganizationNames(){
          return new Promise((resolve, reject) => {
            getRelationOrganizationNames(this.id).then(response => {
              this.relationOrganizationNames = response.data;
              resolve();
            }).catch(error => {
              reject(error);
            });
          })
      },
      getOpinionsOfSameAuthorById(){
        getOpinionsOfSameAuthorById(this.queryParams,this.id).then(response => {
          this.opinionsOfSameAuth=response.rows
        });
      },
      getOpinionsOfSimilarArticlesById(){
        getOpinionsOfSimilarArticlesById(this.queryParams,this.id).then(response => {
          this.opinionsOfSimilarArticles=response.rows
        });
      }
    }
  }
</script>

<style scoped lang="scss">

  .bg {
    background-color: #eeeeee;
    padding: 10px;
  }
  .titleStyle {
    text-align: justify;
    font-weight: bold;
    font-size: 18px;
  }

  .article-title {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    width: 100%;
    color: #1e1e1e
  }
</style>

